<template>
  <div class="pr-content">
    <div class="pr-lf">
      <div class="pr-title pr-pd-lr">人员</div>
      <div class="pr-pd-lr">
        <el-input
          size="small"
          placeholder="请输入人员名称搜索"
          suffix-icon="el-icon-search"
          v-model="queryInfo.query"
          @input="getPeopleList"
          clearable
        >
        </el-input>
      </div>
      <div class="pr-department pr-pd-lr">
        <ul>
          <li :class="department_Index == 0 ? 'active':''" @click="selectdepartment('',0)">全部</li>
          <li :class="department_Index == index + 1 ? 'active':''" v-for="(item,index) in departmentList" :key="index" @click="selectdepartment(item.id,index + 1)">{{ item.name.substring(0,2) }}</li>
        </ul>
      </div>
      <div class="pr-dm-people" :style="{height: DepartmentHeight +'px'}">
        <div v-for="item in peopleList" :key="item.id">
          <div class="pr-people-title">{{ item.name }}</div>
          <div class="pr-people-list" v-for="items in item.data" :key="items.id">
            <div class="pr-people-item" :class="{'active-people':peopleId  == items.id}" @click="selectpeople(items.id)">
              <div class="item-surname" :style="{background:items.background}">{{ items.nickname.substring(0,1) }}</div>
              <div class="flex">
                <div>
                  <p class="font_14">{{ items.nickname }}</p>
                  <!-- <el-progress :percentage="0" color="#409eff"></el-progress> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:[],
    data(){
        return{
          backgroundItem:['#68D6EE','#6885EE','#EEA068','#eec068'],
          department_Index:0,
          peopleId:'',
          queryInfo:{
            dep_id:'',
            query:''
          },
          departmentList:[],
          peopleList:[],
          DepartmentHeight:0,
        }
    },
    created(){
      this.$bus.on("follow_personnel", (value) => {
        // console.log(value)
        // let accumulatedHeight = 0;
        // for (let i = 0; i < value.AllList.length; i++) {
        //     accumulatedHeight += value.itemHeight[i] + 78;
        //     if (accumulatedHeight >= value.dom.scrollTop) {
        //         // leftIndex = i
        //         if(i <= 0){
        //             startIndex = i;
        //         }else{
        //             startIndex = i -1;
        //         }
        //     break;
        //     }
        // }
        // let  flattenedData = []
        // this.peopleList.forEach(item => {
        //   flattenedData.push(...item.data);  
        // });
        //     this.peopleId =  flattenedData[value].id
      // let a =  [...document.querySelectorAll('.personnel-list')].find(e=>{
      //   console.log(value.scrollTop,+e.style.top.split('px')[0])
      //     if(value.scrollTop > +e.style.top.split('px')[0]){
      //       return +e.id.split('item-')[1]
      //     }
      //   })
        // console.log(document.querySelectorAll('.personnel-list'))
      //  let a = value.height.reduce((acc, curr,currentIndex) => {
      //       if(value.scrollTop > curr){
      //         //  console.log(
      //         // currentIndex,'******************')
      //           return 'STOPPED';  
      //         }
      //      return acc + curr
      //     }, 0)
        // value.height.forEach((e,i)=>{
        //   console.log(e)
        //   if(value.scrollTop > e){
        //     console.log(i,'index')
        //   }
        // })
          // console.log(a,'123')
    })
      this.getPeopleList('one')
      this.getDepartmentList()
    },
    watch:{
        departmentList(){
           this.$nextTick(() => {  
            const viewportHeight = window.innerHeight; 
            let element = document.getElementsByClassName('pr-department')[0];
            const height = element.offsetHeight + 212;
            this.DepartmentHeight = viewportHeight - height;
          });  
        }
    },
    methods:{
      // 获取部门列表
      getDepartmentList(){
        this.$http.get("/performance/Performance/departmentList").then(res=>{
              if(res.data.code != 200)return this.$message.error(res.data.msg);
              this.departmentList = res.data.data
        })
      },

      // 获取人员列表
      getPeopleList(first){
        this.$http.get("/performance/Performance/peopleList",{params: this.queryInfo}).then(res=>{
            if(res.data.code != 200)this.$message.error(res.data.msg);
            let bg = [];
           let arr = res.data.data.map(e=>{
             e.data.forEach(element =>{
               element.background = this.backgroundItem[Math.floor(Math.random() * this.backgroundItem.length)]
               bg.push(element.background)
             });
             return e;
            })
              this.$bus.emit("bg_color", bg);
              if(first == 'one'){
                this.peopleId =  res.data.data[0].data[0].id
              }
            this.peopleList = arr
        })
      },

      // 选择部门
      selectdepartment(item,index){
        this.$bus.emit("dep_id", item);
        this.queryInfo.dep_id = item;
        this.department_Index = index;
        this.getPeopleList();
      },

      // 选择人员
      selectpeople(id){
        const flattenedData = [];
        this.peopleList.forEach(item => {
          flattenedData.push(...item.data);  
        });
        const index = flattenedData.findIndex(item => item.id === id);  
        this.$bus.emit("scrollInto",id);
        this.peopleId = id;
      }
    }
};
</script>

<style scoped>
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 31px;
  background: rgba(217, 217, 217, 0.5);
}

.pr-pd-lr {
  padding: 0 20px;
}
.pr-lf {
  margin-right: 12px;
  box-sizing: border-box;
  width: 220px;
  padding: 20px 0;
  border-radius: 12px;
  background: #fff;
}

.pr-lf >>> .el-input__inner {
  border-radius: 8px;
}

.pr-title {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

.pr-department {
  margin-top: 12px;
  padding-bottom: 12px;
}

.pr-department ul {
  display: flex;
  flex-wrap: wrap;
}

.pr-department li {
  display: flex;
  height: 28px;
  font-size: 14px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  background: rgba(165, 177, 209, 0.1);
}
.active{
  color: #165DFF;
  background: rgba(22, 93, 255, 0.10);
}
.active-people{
  color: #165DFF;
  border-color: #165DFF !important;
  background: rgba(22, 93, 255, 0.05) !important;
}
.pr-dm-people {
  /* height: calc(100vh - 252px); */
  overflow: auto;
  padding: 0 14px 0 20px;
}
.pr-dm-people div:first-child .pr-people-title {
  margin-top: 0;
}
.pr-people-title {
  margin: 12px 0 8px 0;
  color: #616c85;
  font-size: 14px;
}
.pr-people-item {
  cursor: pointer;
  display: flex;
  margin-bottom: 8px;
  padding:12px 8px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  background: #fff;
}
.pr-people-item .item-surname {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;

  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
</style>